<template>
  <div class="storesList">

    <div class="content">
      <el-row>
        <div class="debug">{{multipleSelection}}</div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>店铺列表</el-breadcrumb-item>

        </el-breadcrumb>

      </el-row>
      <el-row :gutter="12">
        <!--todo 统一搜索位置-->


        <el-col :span="8">
          <el-button size="small" @click="toggleSelection(vm.models)">全选</el-button>
          <el-button size="small" @click="toggleSelection()">取消选择</el-button>
          <el-button size="small" type="danger" @click="mDel()">删除选中</el-button>
        </el-col>
        <el-col :span="8">
          <el-input size="small" placeholder="输入关键词" v-model="vm.query.keyword" class="input-with-select">
            <el-button size="small" @click="query({reload:true})" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3" :offset="5">
          <router-link :to="{ path: 'add'}" append>
            <el-button style="float:right" size="small" type="primary" icon="el-icon-plus">添加用户</el-button>
          </router-link>

        </el-col>


      </el-row>
      <!--todo row-class-name 单独操作总店 bug :doLayout	对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法-->
      <el-table
        :data="vm.models"
        ref="multipleTable"
        stripe
        @selection-change="handleSelectionChange"
        border style="width: 100%">
        <template slot="empty">
          <div class="mt-loading"><i class="el-icon-loading"></i>
          </div>
        </template>
        <el-table-column type="expand">
          <template slot-scope="props">
            <span>店铺介绍:{{ props.row.description}}</span>

          </template>
        </el-table-column>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column

          prop="id"
          label="#"
          width="60">
        </el-table-column>

        <el-table-column

          prop="logo"
          label="店标"
          width="80">
          <template slot-scope="scope">
            <span><img width="60px" :src="scope.row.logo" alt=""> </span>

          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="shop_name"
          label="店铺名"
          width="120">
          <template slot-scope="scope">

            <el-tag type="info" size="medium">{{ scope.row.shop_name}}</el-tag>

          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="master_name"
          label="店长姓名"
          width="120">
          <template slot-scope="scope">

            <el-tag type="success" size="medium">{{ scope.row.master_name}}</el-tag>

          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="120">
        </el-table-column>
        <el-table-column

          prop="is_head_shop"
          label="是否总店"
          width="120">
        </el-table-column>
        <el-table-column
          sortable
          prop="sales_number"
          label="销售顾问数"
          width="120">
        </el-table-column>
        <el-table-column

          prop="state"
          label="状态"
          width="120">
        </el-table-column>

        <el-table-column
          align="right"
          label="操作"
          >
          <template slot-scope="scope" v-if="!scope.row.is_head_shop">
            <router-link :to="{ name:'',params: { id: scope.row.id }}" append>
              <el-button type="success" size="mini">

                审核
              </el-button>
            </router-link>
            <router-link :to="{ name:'storesEdit',params: { id: scope.row.id }}" append>
              <el-button size="mini">

                编辑
              </el-button>
            </router-link>

            <el-button
              @click="del"
              size="mini"
              type="danger">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        v-if="!vm.isLoading"
        @current-change="pageChange($event)"
        :page-size="vm.meta.size"
        :current-page="vm.meta.page"
        layout="total,prev, pager, next,jumper"
        :total="vm.meta.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
//  todo 增加路由的参数,配置html5Mode ,导航方法封装
  import Vue from 'vue'
//  import Stores from '@/api/stores'

  export default{
    name: "storesList",
    computed: {

    },

    components: {
//      Stores,
    },
    data(){
      return{
        vm:{
          models:[],
          isNull:false,
          isLoading:false,
          isError:false,
          meta:{},
          query:{}
        },
        multipleSelection: []

      }
    },
    computed:{},
    mounted() {
//      this.query({reload:true});

    },
    methods: {

      toggleSelection(rows) {
        var that=this;
        if (rows) {
          rows.forEach(function(row){
            console.log(row);
            that.$refs.multipleTable.toggleRowSelection(row)
          });
        } else {
          that.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
      },
      reset:function(){
        this.vm.query={
          page:1,
          size:5
        }
      },
      apply:function(){
        // Stores.apply();
      },
      query:function(config){
        var that=this;
        if(config&&config.reload){
          that.reset();
        }
        that.vm.models=[];
        that.vm.isLoading=true;
        Stores.query(that.vm.query).then(function(data){
          that.vm.isLoading=false;
          that.vm.models=data.pass_list;
        }).catch(function(err){
          console.warn(err);
          that.vm.isLoading=false;
          that.vm.isError=true;
        });
      },
      pageChange:function(e){
        Vue.set(this.vm.query,'page',e)
        this.query();
      },
      del:function(){
        var that= this
        that.$confirm('删除将无法恢复, 是否确定','警告',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function(){
//          Stores.del().then();
          that.$message({
            type: 'success',
            message: '删除成功!'
          })
        })


      },
      mDel:function(){
        console.log(this.multipleSelection)
      },


    }

  }
</script>
